<template>
  <div>
    <el-dialog
      title="关联业主"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeAddDialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form ref="refAddForm" label-width="146px">
        <div
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-select
            size="small"
            v-model="searchSel"
            slot="prepend"
            placeholder="请选择"
            class="el_Select"
            @change="onchange"
          >
            <el-option label="用户名" value="1"></el-option>
            <el-option label="手机号" value="2"></el-option>
          </el-select>
          <el-input
            :placeholder="
              searchSel == 1 ? '请输入业主用户名' : '请输入业主手机号'
            "
            v-model="searchVal"
            style="width: 250px; margin-right: 15px"
            size="small"
            :maxlength="searchSel == 1 ? '20' : '11'"
            clearable
            @clear="remobeSafetyOfficerInfo"
            class="el_input"
          >
            <el-button
              slot="append"
              :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
              @click="searchClick"
            >
            </el-button>
          </el-input>
        </div>

        <div class="safety-box">
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            v-if="memberInfo.id"
          >
            <div class="name">
              <span>{{ memberInfo.nickname }}</span>
              <p>{{ memberInfo.mobile }}</p>
            </div>
            <div class="remobe">
              <el-button
                type="text"
                class="button"
                icon="el-icon-delete"
                style="color: #eee; font-size: 20px"
                @click="remobeSafetyOfficerInfo"
              ></el-button>
            </div>
          </el-card>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog" class="cancel-button">取 消</el-button>
        <el-button
          size="small"
          @click="addSubmit"
          v-preventReClick="1000" class="confirm-button"
          >确 定</el-button
        >
      </span>

      <el-dialog
        width="500px"
        title="新增业主"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form
          :model="addForm"
          :rules="rules"
          ref="refForm"
          label-width="80px"
        >
          <el-form-item size="small" label="真实姓名" prop="nickname">
            <el-input
              clearable
              placeholder="请输入真实姓名/昵称"
              maxlength="10"
              v-model.trim="addForm.nickname"
            >
            </el-input>
          </el-form-item>
          <el-form-item size="small" label="手机号" prop="mobile">
            <el-input
              clearable
              placeholder="请输入手机号"
              maxlength="11"
              v-model.trim="addForm.mobile"
            >
            </el-input>
          </el-form-item>
          <el-form-item size="small" label="身份证号" prop="idCard">
            <el-input
              clearable
              placeholder="请输入身份证号"
              maxlength="18"
              v-model.trim="addForm.idCard"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeinner" class="cancel-button">取 消</el-button>
          <el-button
            size="small"
            @click="addinner"
            v-preventReClick="1000" class="confirm-button"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqDeviceUserbind,
  reqGetNormalUser,
  reqAddNormalUser,
} from "@api/api.js";
import { validMobile, checkRegNo } from "../../../utils/validate";
import { mapState } from "vuex";

export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
  },
  name: "addProject",
  data() {
    return {
      innerVisible: false,
      loadingSearch: false,
      searchVal: "",
      mobile: "",
      username: "",
      searchSel: "2", //用户名/手机号
      dialogVisible: false,
      addForm: {
        nickname: "",
        mobile: "",
        idCard: "",
      },
      memberInfo: "",
      // 表单验证规则
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: validMobile,
          },
        ],
        nickname: [
          {
            required: true,
            message: "请输入真实姓名/昵称",
            trigger: "blur",
          },
        ],
        idCard: [
          {
            validator: checkRegNo,
          },
        ],
      },
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {},
  methods: {
    onchange(e) {
      this.searchVal = "";
    },
    // 查询
    async searchClick() {
      this.loadingSearch = true;
      await this.searchSafetyOfficer();
      this.loadingSearch = false;
    },
    // 点击搜索
    async searchSafetyOfficer() {
      let { searchSel, username, mobile, searchVal } = this;
      if (searchSel == 1) {
        username = searchVal;
        mobile = "";
      } else {
        mobile = searchVal;
        username = "";
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(mobile))
          return this.$modal.notifyWarning("请输入正确的手机号");
      }
      if (searchVal.length <= 0)
        return this.$modal.notifyWarning("请输入业主手机号/用户名");
      const res = await reqGetNormalUser({
        username,
        mobile,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (!res.data.row) {
        const result = await this.$confirm(
          "该业主未注册，是否立即新增?",
          "温馨提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).catch(() => {});
        if (result !== "confirm") return;
        if (searchSel == 2) {
          this.addForm.mobile = mobile;
        }
        this.innerVisible = true;
        return;
      }
      this.memberInfo = res.data.row;
    },
    //清空输入框电话号码
    clearMobile() {
      this.memberInfo = "";
      this.searchSel = "2";
      this.searchVal = "";
    },
    // 移除信息
    remobeSafetyOfficerInfo() {
      this.memberInfo = "";
    },
    // 点击新增
    async addSubmit() {
      if (!this.memberInfo.id)
        return this.$modal.notifyWarning("请选择要关联的业主");
      const res = await reqDeviceUserbind({
        userId: this.memberInfo.id,
        imei: this.deviceInfo.imei,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("关联成功");
      this.closeAddDialog();
      this.$parent.getDeviceUsergetByImei();
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.dialogVisible = false;
      this.clearMobile();
    },
    closeinner() {
      this.addForm = {
        nickname: "",
        mobile: "",
        idCard: "",
      };
      this.$refs.refForm.resetFields();
      this.innerVisible = false;
    },
    addinner() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return;
        const res = await reqAddNormalUser(this.addForm);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("新增成功");
        this.closeinner();
        if (this.searchSel == "2") {
          this.searchClick();
        }
      });
    },
  },
  mounted() {},
  deactivated() {
    this.closeAddDialog();
    if(this.$refs.refForm!=null){
      this.closeinner();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../../../views/common.less");

// 查询条件切换
::v-deep .el-select .el-input {
  width: 100px;
}

// 搜索按钮
::v-deep .el-input-group__append {
  color: #fff;
  border: none;
  background-color: #7367f0;
}

.el-form {
  position: relative;

  .el-form-item {
    .el-input {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 5px;
      margin: auto;
    }
  }
}

.safety-box {
  position: relative;
  width: 460px;
  height: 100px;

  .el-card {
    position: absolute;
    left: 48px;
    bottom: 0;
    margin: auto;

    .name {
      padding: 0 10px;
      max-width: 360px;
      height: 80px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      span {
        font-size: 20px;
        color: #666;
        font-weight: 600;
        letter-spacing: 5px;

        overflow: hidden; // 溢出隐藏
        white-space: nowrap; // 不换行
        text-overflow: ellipsis; // 显示省略号
      }

      p {
        font-size: 18px;
        margin-top: 2px;
        color: #999;
      }
    }

    .remobe {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100px;
      z-index: 999;
      opacity: 0;
      text-align: center;
      line-height: 90px;

      &:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.7);
      }
    }
  }
}

.search-button:active {
  opacity: 0.5;
}

// 搜索框
::v-deep .el_input .el-input__inner {
  border-left: none !important;
  border-radius: 0px !important;
}

::v-deep .el_Select .el-input__inner {
  border-radius: 0px !important;
}

::v-deep .el_select .el-input {
  width: 100% !important;
}
</style>